import { useRoutes } from "react-router-dom";

import Home from "../pages/Home";
import Pins from "../pages/Pins";
import Course from "../pages/Course";

import New from "../pages/Pins/components/New";
import Hot from "../pages/Pins/components/Hot";
import Following from "../pages/Pins/components/Following";

import Search from "../pages/Home/components/Search";
import Params from "../pages/Home/components/Params";
import State from "../pages/Home/components/State";

// 路由配置项
const routes = [
  {
    path: "/",
    element: <Home />,
    children: [
      {
        // 普通路由路径 -> 1 对 1
        path: "/search",
        element: <Search />,
      },
      {
        // 特殊路由路径 : -> 多 对 1
        path: "/params/:id", // 路径占位符，占位的内容就是params参数
        element: <Params />,
      },
      {
        path: "/state",
        element: <State />,
      },
    ],
  },
  {
    path: "/pins",
    element: <Pins />,
    children: [
      {
        path: "/pins/new",
        element: <New />,
      },
      {
        path: "/pins/hot",
        element: <Hot />,
      },
      {
        path: "/pins/following",
        element: <Following />,
      },
    ],
  },
  {
    path: "/course",
    element: <Course />,
  },
];

// 一个文件是可以包含默认暴露、分别暴露和统一暴露的，只是默认暴露只能有一次。

// 渲染路由的方法（首字母需大写）
export const RenderRoutes = () => {
  // useRoutes 接受路由配置项作为参数。返回值是组件（由Routes和Route组成的组件）
  return useRoutes(routes);
};

export default routes;
